<template>
    <el-dialog :visible.sync="dialog" :title="isAdd ? '教师调配信息' : '编辑教师调配信息'" append-to-body width="450px">
        <el-form ref="form" :model="form" :rules="rules" size="small" label-width="100px" append-to-body>

            <el-form-item label="老师姓名" prop="teaId" >
                <el-select v-model="form.teaId" clearable  filterable placeholder="请选择老师" style="width: 250px;" >
                    <el-option
                        v-for="item in teaList"
                        :key="item.teaId"
                        :label="item.teaName"
                        :value="item.teaId">
                    </el-option>
                </el-select>
            </el-form-item>


            <el-form-item label="目标学校" prop="newSchId">
                <el-select v-model="form.newSchId" clearable   filterable placeholder="请选择目标学校" style="width: 250px;">
                    <el-option
                        v-for="item in schList"
                        :key="item.schId"
                        :label="item.schName"
                        :value="item.schId">
                    </el-option>
                </el-select>
            </el-form-item>


            <!-- <el-form-item label="目标学校" prop="id" >
                <treeselect
                  v-model="form.id"
                  :options="options"
                  :disable-branch-nodes="true"
                  :show-count="true"
                  placeholder="请选择"
                  noOptionsText="没有可选数据"
                  noChildrenText="子节点没有数据了哦"
                  style="width: 250px;"
                />
            </el-form-item> -->

            <el-form-item label="调度说明">
                <div style=""></div>
                <el-input v-model="form.dispatchInfo" style="width: 250px;" rows="3" type="textarea" maxlength="100"   show-word-limit clearable/>
            </el-form-item>


            

        </el-form>

        <div slot="footer" class="dialog-footer">
            <el-button type="text" @click="cancel">取消</el-button>
            <el-button :loading="loading" type="primary" @click="doSubmit" >确认</el-button>
        </div>
    </el-dialog>
</template>

<script>
import { dispatchSave } from '@/api/request'
import Treeselect from '@riophae/vue-treeselect'
import '@riophae/vue-treeselect/dist/vue-treeselect.css'
import { debounce } from '@/utils/validate'
export default {
    components: { Treeselect },
    props: {
        isAdd: {
          type: Boolean,
          required: true
        },
        schList:{
           type: Array,
           required: true 
        },
        teaList:{
           type: Array,
           required: true 
        },

    },
    data() {
        return {
            // value:[], //配合多选 :multiple="true" 使用
            options: [
                    {
                        id: 'a',
                        label: 'a',
                        pid:'-2',
                        children: [
                            {
                                id: 'aa',
                                label: 'aa',
                                pid:'1'
                            },
                            {
                                id: 'ab',
                                label: 'ab',
                                pid:'2'
                            }
                        ],
                    },
                    {
                        id: 'b',
                        label: 'b',
                        pid:'3',
                        children: []
                    },
                    {
                        id: 'c',
                        label: 'c',
                        pid:'4'
                    }
            ],
            disabled:true,
            loading: false, dialog: false, permissions: [],
            form: {
                id:'',
                teaId:'',
                oldSchId:'',
                newSchId:'',
                dispatchInfo:'',
                status:0,
                // pid:'',
            },
            rules: {
                teaId:[
                    { required: true, trigger: 'blur',message: '请选择需要调度的老师',},
                ],
                newSchId: [
                    { required: true, trigger: 'blur',message: '请选择目标学校',},
                ],
                
            },
        }
    },
    methods: {
        cancel(){
            this.dialog  = false
        },
        doSubmit:debounce(function(){
            console.log(this.form.id)
            this.$refs['form'].validate((valid) => {
                if (valid){
                    dispatchSave(this.form).then(res => {
                        this.$notify({
                            title: '保存成功',
                            type: 'success',
                            duration: 2500
                        })
                        this.dialog = false
                        this.$parent.init()
                    })
                }else {
                    return false
                }

            })

        },500),

    },

}
</script>

<style>
/*提升样式*/
.ivu-select-dropdown, .ivu-cascader-transfer{
    z-index: 3000 !important;
}
.ivu-cascader .ivu-input {
    font-size: 13px;
    padding-left: 15px;
}
</style>

<style scoped lang="scss">
.el-form-item--mini.el-form-item, .el-form-item--small.el-form-item{
    display: inline-block;
}
</style>
